﻿@page "/gantt-chart/eventmarkers"

@using Syncfusion.Blazor.Gantt
@using BlazorDemos



@inherits SampleBaseComponent;

<SampleDescription>
    <p>This sample visualizes how to notify the important dates in the project timeline.</p>
</SampleDescription>
<ActionDescription>
    <p>In this example, the <code>EventMarkers</code> are used like a bookmark to show the different stages of the project life cycle. You can show the desired text on the date.</p> The Event Markers model has the below properties to customize the marker:
    <p> •  <code>CssClass:</code> Used to assign external CSS styles to that particular marker.</p>
    <p> •  <code>Day:</code> Used to set date of the event marker.</p>
    <p> •  <code>Label:</code> The desired text can be shown on the vertical line using this property.</p>

</ActionDescription>

<div class="col-lg-12 control-section">
    <div class="content-wrapper">
        <div class="row">
            <SfGantt DataSource="@TaskCollection" Height="450px" Width="100%" ProjectStartDate="@ProjectStart" ProjectEndDate="@ProjectEnd">
                <GanttTaskFields Id="TaskId" Name="TaskName" StartDate="StartDate" EndDate="EndDate" Duration="Duration" Progress="Progress" ParentID="ParentId" Indicators="Indicators" Dependency="Predecessor">
                </GanttTaskFields>

                <GanttColumns>
                    <GanttColumn Field="TaskId" HeaderText="Task Id"></GanttColumn>
                    <GanttColumn Field="TaskName" HeaderText="Task Name"></GanttColumn>
                    <GanttColumn Field="StartDate" HeaderText="Start Date"></GanttColumn>
                    <GanttColumn Field="EndDate" HeaderText="End Date"></GanttColumn>
                    <GanttColumn Field="Duration" HeaderText="Duration"></GanttColumn>
                    <GanttColumn Field="Predecessor" HeaderText="Dependency"></GanttColumn>
                    <GanttColumn Field="Progress" HeaderText="Progress"></GanttColumn>
                </GanttColumns>

                <GanttEventMarkers>
                    <GanttEventMarker Day="@Event1" Label="Research phase"
                                      CssClass="e-custom-event-marker"></GanttEventMarker>
                    <GanttEventMarker Day="@Event2" Label="Design phase"
                                      CssClass="e-custom-event-marker"></GanttEventMarker>
                    <GanttEventMarker Day="@Event3" Label="Production phase"
                                      CssClass="e-custom-event-marker"></GanttEventMarker>
                    <GanttEventMarker Day="@Event4" Label="Sales and marketing phase"
                                      CssClass="e-custom-event-marker"></GanttEventMarker>
                </GanttEventMarkers>
                <GanttSplitterSettings Position="30%"></GanttSplitterSettings>
                <GanttLabelSettings LeftLabel="TaskName" TValue="EventData.TaskData"></GanttLabelSettings>
            </SfGantt>
        </div>
    </div>
</div>


@code{
    public DateTime Event1 = new DateTime(2019, 04, 07);
    public DateTime Event2 = new DateTime(2019, 04, 30);
    public DateTime Event3 = new DateTime(2019, 05, 22);
    public DateTime Event4 = new DateTime(2019, 06, 19);
    public DateTime ProjectStart = new DateTime(2019, 3, 27);
    public DateTime ProjectEnd = new DateTime(2019, 7, 6);
    public List<EventData.TaskData> TaskCollection { get; set; }


    protected override void OnInitialized()
    {
        this.TaskCollection = EventData.GetTaskCollection();
    }
}
